<template>
  <div class="custom-tree-container">
    <div class="block">
      <el-form ref="form1" :model="form" label-width="80px" :rules="rules">
        <el-form-item prop="name" label="姓名">
          <el-input
            placeholder="请输入姓名"
            style="width: 200px"
            v-model="form.name"
          ></el-input>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
😂🙅
      <el-tree
        :data="datas"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @check="clickDeal"
        ref="aa"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span v-if="node.id != 1">
            <el-button type="text" size="mini" @click="append(node, data)">
              添加
            </el-button>
            <el-button type="text" size="mini" @click="change(node, data)">
              修改
            </el-button>
            <el-button type="text" size="mini" @click="remove(node, data)">
              删除
            </el-button>
          </span>
        </span>
      </el-tree>

      <el-dialog
        title="添加/修改"
        :visible.sync="dialogVisible"
        width="width"
        :before-close="dialogBeforeClose"
      >
        <div>
          <p>当前父节点：{{ parentTitle }}</p>
          <el-form ref="form2" :model="form1" label-width="80px" :rules="rules">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="form1.name"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer">
          <el-button type="primary" @click="changes" v-if="isshow"
            >修 改</el-button
          >
          <el-button type="primary" @click="add" v-else>添 加</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
let id = 1000;
import axios from "axios";
export default {
  data() {
    return {
      datas: [
        {
          id: 1,
          label: "全国",
          isshow: false,
          children: [
            {
              id: 2,
              label: "北京",
              isshow: false,
              children: [
                {
                  id: 11,
                  label: "石景山",
                  isshow: false,
                },
              ],
            },
            {
              id: 3,
              label: "江苏",
              isshow: false,
              children: [
                {
                  id: 5,
                  label: "南京",
                  isshow: false,
                  children: [
                    { id: 9, label: "江宁", isshow: false },
                    {
                      id: 10,
                      label: "浦口",
                      isshow: false,
                    },
                  ],
                },
                {
                  id: 6,
                  label: "苏州",
                  isshow: false,
                },
              ],
            },

            {
              id: 4,
              label: "浙江",
              isshow: false,
              children: [
                {
                  id: 7,
                  label: "杭州",
                  isshow: false,
                },
                {
                  id: 8,
                  label: "台州",
                  isshow: false,
                },
              ],
            },
          ],
        },
      ],
      node: {},
      datab: {},
      isshow: true,
      dialogVisible: false,
      parentTitle: "",
      checkData: [],
      form: {
        name: "",
      },
      form1: {
        name: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请填写编号",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    clickDeal(e, a) {
      //   let index = this.checkData.findIndex((r) => r.id == e.id);
      //   console.log(index);
      //   if (index == -1) {
      //     this.checkData.push(e);
      //     this.checkData.forEach((r) => {
      //       r.isshow = true;
      //     });
      //     console.log(this.checkData, 436546);
      //   }else{
      //           this.checkData.forEach((r) => {
      //       r.isshow = false;
      //     });
      //   }
    },
    cancel() {
      this.dialogVisible = false;
      this.form1.name = "";
      this.$refs.form2.resetFields();
    },
    getList() {
      //   axios.get("xxxx").then((r) => {
      //     this.datas = r.data;
      //   });
    },
    search() {
      console.log(this.form.name);
      this.$refs.form1.validate((val) => {
        if (val) {
          axios.post("xxxxx", { name: this.form.name }).then((r) => {
            this.getList();
          });
        }
      });
    },
    append(node, data) {
      this.form1.name = "";
      //   console.log(this.checkData, 4546);
      //   if (!this.checkData.id) {
      //     this.$message("请选择要添加的节点");
      //   } else {
      //   if (this.checkData.length == 0) {
      //     this.$message("请选择添加");
      //   } else if (this.checkData.length > 1) {
      //     this.$message("请选择一个添加");
      //   } else {
      console.log(node, data);
      this.dialogVisible = true;
      this.isshow = false;
      this.parentTitle = node.parent.label;
      //   }

      //   }
    },
    // fa(node, data) {
    //   console.log(node, data, 65546546);
    //   let index = this.datas.findIndex((r) => {
    //     if (r.id != data.id) {
    //  this.fa()
    //     } else {
    //       return r;
    //     }
    //   });
    //   // if(index==-1){
    //   //     this.fa(node,data)
    //   // }else{
    //   //     return data
    //   // }
    //   console.log(index);
    // //   return 1323;
    // },
    add() {
      this.$refs.form2.validate((val) => {
        if (val) {
          axios.post("xxxxx", { name: this.form1.name }).then((r) => {
            this.$message("添加成功");
            this.dialogVisible = false;
            Object.assign(this._data.from1, this.$options.data().form1);
            this.getlist();
          });
        }
      });
    },
    remove(node, data) {
      let label = data.label;
    //   console.log(node, data);
      if (label !== "全国") {
        this.$confirm(`你确定删除吗${label}吗`, "删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then((r) => {
            axios.delete("xxxx", { id: data.id }).then((r) => {
              this.$message("删除成功");
              this.getList();
            });
         
        });
      }
    },
    change(node, data) {
      this.dialogVisible = true;
      this.parentTitle = node.parent.label;
      // console.log(node,data);
      this.form1.name = data.label;
      this.isshow = true;
      this.node = node;
      this.datab = data;
    },
    changes() {
      this.$refs.form2.validate((val) => {
        if (val) {
          axios
            .post("xxxxxxx", {
              id: this.datab.id,
              name: this.form1.name,
              parentId: this.node.parent.id,
            })
            .then((r) => {
              this.$message("修改成功");
              this.dialogVisible = false;
              Object.assign(this._data.from1, this.$options.data().form1);
              this.getlist();
            });
        }
      });
    },

    dialogBeforeClose() {
      this.dialogVisible = false;
      this.$refs.form2.resetFields();
    },
  },
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
